import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import {
  Form,
  Select,
  Input
} from 'antd'

import { validator } from '../../utils/validator_utils'

const Item = Form.Item
const { Option } = Select

// 添加/修改用户的 form组件
class UserForm extends PureComponent {

  static propTypes = {
    setForm: PropTypes.func.isRequired, // 用来传递 form对象的函数
    roles: PropTypes.array.isRequired, // 接收所有角色的数组
    user: PropTypes.object, // 接收修改的用户对象
  }

  // 自定义用户名验证
  validatorName = (rule, value, callback) => {
    validator(rule, value, callback, '用户名')
  }

  // 自定义密码验证
  validatorPwd = (rule, value, callback) => {
    validator(rule, value, callback, '密码')
  }

  // 自定义手机号验证
  validatorPhone = (rule, value, callback) => {
    validator(rule, value, callback, '手机号')
  }

  // 自定义邮箱验证
  validatorEmail = (rule, value, callback) => {
    validator(rule, value, callback, '邮箱')
  }

  componentWillMount () {
    this.props.setForm(this.props.form)
  }

  render () {
    const { roles } = this.props
    const user = this.props.user
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: { // 左侧 label 的宽度
        xs: { span: 24 },
        sm: { span: 6},
      },
      wrapperCol: { // 右侧包裹的宽度
        xs: { span: 24 },
        sm: { span: 16 },
      },
    }

    return (
      <Form  {...formItemLayout}>
        <Item label='用户名'>
          {
            getFieldDecorator('username', {
              initialValue: user.username,
              rules: [
                { validator: this.validatorName }
              ]
            })(
              <Input placeholder='请输入用户名' />
            )
          }
        </Item>
        {
          user._id ? null : (
            <Item label='密码'>
              {
                getFieldDecorator('password', {
                  initialValue: user.password,
                  rules: [
                    { validator: this.validatorPwd }
                  ]
                })(
                  <Input type='password' placeholder='请输入密码' />
                )
              }
            </Item>
          )
        }
        <Item label='手机号'>
          {
            getFieldDecorator('phone', {
              initialValue: user.phone,
              rules: [
                { validator: this.validatorPhone }
              ]
            })(
              <Input placeholder='请输入手机号' />
            )
          }
        </Item>
        <Item label='邮箱'>
          {
            getFieldDecorator('email', {
              initialValue: user.email,
              rules: [
                { validator: this.validatorEmail }
              ]
            })(
              <Input placeholder='请输入邮箱' />
            )
          }
        </Item>
        <Item label='角色'>
          <Item>
            {
              getFieldDecorator('role_id', {
                initialValue: user.role_id,
                rules: [
                  { required: true, message: '请选择角色'}
                ]
              })(
                <Select placeholder='请选择角色'>
                  {
                    roles.map(role => <Option key={role._id} value={role._id}>{ role.name }</Option>)
                  }
                </Select>
              )
            }
          </Item>
        </Item>
      </Form>
    )
  }
}

export default Form.create()(UserForm)
